<template>
  <div class="not-found-page">
    <div class="container">
      <div class="not-found-content">
        <!-- 404动画效果 -->
        <div class="error-animation">
          <div class="error-number">
            <span class="four">4</span>
            <span class="zero">0</span>
            <span class="four">4</span>
          </div>
          <div class="error-glitch">
            <span class="glitch-text">页面未找到</span>
          </div>
        </div>

        <!-- 错误信息 -->
        <div class="error-info">
          <h2 class="error-title gradient-text">抱歉，您访问的页面不存在</h2>
          <p class="error-description">
            可能是链接已失效，或者页面已被移动。别担心，让我们带您回到正确的地方。
          </p>
        </div>

        <!-- 操作按钮 -->
        <div class="error-actions">
          <el-button 
            type="primary" 
            size="large" 
            @click="goHome"
            class="home-button"
          >
            <el-icon><House /></el-icon>
            返回首页
          </el-button>
          
          <el-button 
            size="large" 
            @click="goBack"
            class="back-button"
          >
            <el-icon><ArrowLeft /></el-icon>
            返回上页
          </el-button>
          
          <el-button 
            size="large" 
            @click="openSearch"
            class="search-button"
          >
            <el-icon><Search /></el-icon>
            搜索内容
          </el-button>
        </div>

        <!-- 推荐链接 -->
        <div class="recommended-links">
          <h3>您可能感兴趣的内容：</h3>
          <div class="links-grid">
            <router-link 
              v-for="link in recommendedLinks" 
              :key="link.path"
              :to="link.path"
              class="link-card glass-effect glow-hover"
            >
              <div class="link-icon" :style="{ color: link.color }">
                <el-icon size="24">
                  <component :is="link.icon" />
                </el-icon>
              </div>
              <div class="link-info">
                <h4>{{ link.title }}</h4>
                <p>{{ link.description }}</p>
              </div>
            </router-link>
          </div>
        </div>

        <!-- 联系信息 -->
        <div class="contact-info">
          <p>如果您认为这是一个错误，请联系我们：</p>
          <a href="mailto:support@technova.com" class="contact-link">
            <el-icon><Message /></el-icon>
            support@technova.com
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  House, ArrowLeft, Search, Message, 
  Cpu, Connection, Monitor, TrendCharts, Iphone 
} from '@element-plus/icons-vue'

const router = useRouter()

// 推荐链接
const recommendedLinks = [
  {
    path: '/category/AI',
    title: '人工智能',
    description: '探索AI前沿技术',
    icon: 'Cpu',
    color: '#00d4ff'
  },
  {
    path: '/category/Blockchain',
    title: '区块链',
    description: '了解区块链创新',
    icon: 'Connection',
    color: '#39ff14'
  },
  {
    path: '/category/Hardware',
    title: '硬件科技',
    description: '最新硬件资讯',
    icon: 'Monitor',
    color: '#ff6b35'
  },
  {
    path: '/category/Startup',
    title: '创业动态',
    description: '创业生态观察',
    icon: 'TrendCharts',
    color: '#8b5cf6'
  }
]

const goHome = () => {
  router.push('/')
}

const goBack = () => {
  if (window.history.length > 1) {
    router.go(-1)
  } else {
    router.push('/')
  }
}

const openSearch = () => {
  router.push('/search')
}
</script>

<style scoped lang="scss">
.not-found-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tech-bg-primary);
  padding: 40px 0;
}

.not-found-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.error-animation {
  margin-bottom: 40px;
  
  .error-number {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    
    .four, .zero {
      font-size: 120px;
      font-weight: 800;
      background: var(--tech-gradient-accent);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: float 3s ease-in-out infinite;
      
      &:nth-child(1) {
        animation-delay: 0s;
      }
      
      &:nth-child(2) {
        animation-delay: 0.5s;
      }
      
      &:nth-child(3) {
        animation-delay: 1s;
      }
    }
  }
  
  .error-glitch {
    .glitch-text {
      font-size: 24px;
      font-weight: 600;
      color: var(--tech-accent-neon);
      text-shadow: 
        2px 0 0 #ff6b35,
        -2px 0 0 #39ff14;
      animation: glitch 2s infinite;
    }
  }
}

.error-info {
  margin-bottom: 40px;
  
  .error-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
  }
  
  .error-description {
    font-size: 16px;
    color: var(--tech-text-secondary);
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
  }
}

.error-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 60px;
  
  .el-button {
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 8px;
    transition: all var(--tech-transition-normal) ease;
    
    &.home-button {
      background: var(--tech-gradient-primary);
      border: none;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 212, 255, 0.3);
      }
    }
    
    &.back-button, &.search-button {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(0, 212, 255, 0.3);
      color: var(--tech-text-primary);
      
      &:hover {
        background: rgba(0, 212, 255, 0.2);
        border-color: var(--tech-accent-neon);
        transform: translateY(-2px);
      }
    }
  }
}

.recommended-links {
  margin-bottom: 40px;
  
  h3 {
    font-size: 18px;
    color: var(--tech-text-primary);
    margin-bottom: 24px;
  }
  
  .links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    
    .link-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 16px;
      text-decoration: none;
      border-radius: 12px;
      transition: all var(--tech-transition-normal) ease;
      
      &:hover {
        transform: translateY(-4px);
        text-decoration: none;
      }
      
      .link-icon {
        margin-bottom: 12px;
      }
      
      .link-info {
        text-align: center;
        
        h4 {
          font-size: 14px;
          font-weight: 600;
          color: var(--tech-text-primary);
          margin-bottom: 4px;
        }
        
        p {
          font-size: 12px;
          color: var(--tech-text-secondary);
          line-height: 1.4;
        }
      }
    }
  }
}

.contact-info {
  padding-top: 40px;
  border-top: 1px solid rgba(0, 212, 255, 0.1);
  
  p {
    font-size: 14px;
    color: var(--tech-text-secondary);
    margin-bottom: 12px;
  }
  
  .contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--tech-accent-neon);
    text-decoration: none;
    transition: all var(--tech-transition-normal) ease;
    
    &:hover {
      color: var(--tech-accent-green);
      text-shadow: 0 0 8px currentColor;
    }
  }
}

// 动画效果
@keyframes float {
  0%, 100% { 
    transform: translateY(0); 
  }
  50% { 
    transform: translateY(-10px); 
  }
}

@keyframes glitch {
  0%, 100% {
    text-shadow: 
      2px 0 0 #ff6b35,
      -2px 0 0 #39ff14;
  }
  25% {
    text-shadow: 
      -2px 0 0 #ff6b35,
      2px 0 0 #39ff14;
  }
  50% {
    text-shadow: 
      2px 0 0 #39ff14,
      -2px 0 0 #ff6b35;
  }
  75% {
    text-shadow: 
      -2px 0 0 #39ff14,
      2px 0 0 #ff6b35;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .error-animation {
    .error-number {
      .four, .zero {
        font-size: 80px;
      }
    }
    
    .error-glitch {
      .glitch-text {
        font-size: 18px;
      }
    }
  }
  
  .error-info {
    .error-title {
      font-size: 20px;
    }
    
    .error-description {
      font-size: 14px;
    }
  }
  
  .error-actions {
    flex-direction: column;
    align-items: center;
    
    .el-button {
      width: 100%;
      max-width: 200px;
    }
  }
  
  .recommended-links {
    .links-grid {
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 12px;
      
      .link-card {
        padding: 16px 12px;
      }
    }
  }
}
</style>